<template>
    <div>
        <van-nav-bar title="我的邀请" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div style="margin-top: 12px;">
        <div style="font-size: 22px; text-align: center;color: red"><span>邀请好友得分成</span></div>
        <div style="font-size: 12px; text-align: center;"><span>只有邀请的好友消费后才能获得分成</span></div>

    </div>
    <div style="margin-top: 12px;text-align: center;">
        <van-cell-group inset>
            <van-field v-model="text" center clearable label="我的邀请码" readonly>
                <template #button>
                    <van-button size="small" type="primary" @click="copyText()">复制</van-button>
                </template>
            </van-field>
        </van-cell-group>
    </div>

    <div style="margin-top: 12px;text-align: center;">
        <van-button color="linear-gradient(to right, #ff6034, #ee0a24)" on-click="create">
            立马邀请
        </van-button>
    </div>

    <div style="margin-top: 12px;margin-right: 8px;font-size: var(--van-cell-font-size);">
        <span style="padding-top: 5px;margin-left: 16px;">我已邀请的好友</span>
        <div style="margin-top: 8px;color: var(--van-cell-text-color);font-size: var(--van-cell-font-size);">
            <span style="padding-top: 5px;margin-left: 16px;">累计邀请：<span>{{ count }}</span>人</span>
        </div>
        <div style="margin-top: 5px;color: var(--van-cell-text-color);font-size: var(--van-cell-font-size);">
            <span style="padding-top: 5px;margin-left: 16px;">已获得收益：<span>{{ income }}</span>元</span>
        </div>
<!--        <div style="margin-top: 5px;color: var(&#45;&#45;van-cell-text-color);font-size: var(&#45;&#45;van-cell-font-size);">-->
<!--            <span style="padding-top: 5px;margin-left: 16px;">在途收益：<span>{{ incoming }}</span>元</span>-->
<!--        </div>-->
    </div>
    <div style="margin-top: 12px;margin-right: 8px;background-color: aliceblue;font-size: 22px;">
        <van-cell-group>
            <van-cell title="昵称" value="邀请时间" />
        </van-cell-group>
    </div>
    <div>
        <van-list :finished="finished" finished-text="没有更多了">
            <van-cell v-for="item in list" :key="item" :title="item.userName" :value="item.invitedDateStr" />
        </van-list>
    </div>
    <div style="font-size: 22px;text-align: center;">
        <span style="text-align: center;">......</span>
    </div>
</template>
<script setup>
const onClickLeft = () => history.back();
import { GetUserInfo, GetInvited, GetInvitedIncome } from '@/api/user.js'
import { ref } from 'vue';
import { showFailToast, showSuccessToast } from 'vant';
const list = ref([]);
// const loading = ref(false);
const finished = ref(false);

const count = ref(3);
const income = ref('')
const incoming = ref('')

const text = ref('');

function copyText() {
    navigator.clipboard.writeText(text.value).then(
        () => showSuccessToast('复制成功'),
        () => showFailToast('复制失败')
    );
}
getUserInfo();
function getUserInfo() {
    GetUserInfo()
        .then(res => {
            if (res.data.code == 200000) {
                text.value = res.data.data.inviteCode
            }
        })
}
getInvited();
function getInvited() {
    GetInvited()
        .then(res => {
            if (res.data.code == 200000) {
                list.value = res.data.data.data
                count.value = res.data.data.invitedCount

            }
        })
}
getInvitedIncome();
function getInvitedIncome() {
    GetInvitedIncome()
        .then(res => {
            if (res.data.code == 200000) {
                income.value = String(res.data.data.invitedIncome)
                incoming.value = String(res.data.data.invitingIncome)

            }
        })
}
</script>